<template>
    <div>
        <el-container class="form-container">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>Demo</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="handlerSubmitForm">保存</el-button>
                </div>
                <div >
                   <el-form  :rules="rules"  ref="form"   :model="form" size="small" label-width="120px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item  label="姓名"  prop="fdName">
                                    <el-input class="input" v-model="form.fdName"   size="mini" ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item  label="密码"  prop="fdPassword">
                                    <el-input class="input" show-password v-model="form.fdPassword"  size="mini" ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="爱好" prop="fdHobby">
                                    <el-checkbox-group v-model="form.fdHobby" size="mini">
                                        <el-checkbox  v-for="hobby in hobbys" 
                                            :label="hobby.id" :key="hobby.id" :value="hobby.id">{{hobby.name}}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="日期" prop="fdCreateTime">
                                    <el-date-picker size="mini"
                                    v-model="form.fdCreateTime"
                                    type="date"
                                    placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="性别" prop="fdSex">
                                    <el-radio-group v-model="form.fdSex">
                                        <el-radio label="M" >男</el-radio>
                                        <el-radio label="F" >女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="是否有效" prop="fdAvailable">
                                    <el-radio-group v-model="form.fdAvailable">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="城市" prop="fdCity">
                                    <el-select v-model="form.fdCity" size="mini" placeholder="请选择">
                                        <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item  label="备注1">
                                    <el-input type="textarea" :rows="4" class="input" style="width:92%" v-model="form.fdRemark"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                   </el-form>
                </div>
            </el-card>
        </el-container>
    </div>
</template>
<script>
import {edit} from '@/components/mixins/form';
export default {
    name: "codeExamplePersonAdd",
    components: {
    },
    data() {
        return {
            updateUrl:'/api/code/example/code_example_person',
            fetchUrl:'/api/code/example/code_example_person',
            form: {
                fdId:'',
                fdName: '',
                fdCreateTime:'',
                fdPassword:'',
                fdHobby:[],
                fdSex:'',
                fdCity: '',
                fdAvailable:true,
                fdRemark: '',
                attchmentId: ''
            },
            hobbys:[{id:"1",name:"篮球"},{id:"2",name:"足球"},{id:"3",name:"乒乓球"}],
            options:[
                {
                    value:'yangzhou',
                    name:'扬州'
                },
                {
                    value:'suzhou',
                    name:'苏州'
                }
            ],
            rules:{
                fdName :[{required: true, message: '请输入姓名', trigger: 'blur'}],
                fdCreateTime :[{required: true, message: '请输入时间', trigger: 'blur'}],
                fdPassword :[{required: true, message: '请输入密码', trigger: 'blur'}]
	        }
        }
    },
    mixins:[edit]
}
</script>
<style scoped>
@import "~@/assets/css/form.css";
</style>

